<script setup lang="ts">
import { useGeneral } from '@/hooks/useGeneral';
import { useLayoutStore } from '@/store/modules/layout';

const { AssistModule } = useGeneral();
const { rightHighlight } = storeToRefs(useLayoutStore());
const { handoffHandle } = useLayoutStore();

// 当前选中的右侧面板项目
const currentRightItem = computed(() => {
  return AssistModule.right.find((item) => item.id === rightHighlight.value) || AssistModule.right[0];
});

// 处理右侧面板标题点击切换
const titleHandle = (item: any) => {
  if (item.children && item.children.length > 0) {
    handoffHandle(item.children, item.id, 'right');
  }
};

// 初始化时设置默认选中第一个（周边资源）
onMounted(() => {
  if (rightHighlight.value === 0) {
    titleHandle(AssistModule.right[0]);
  }
});
</script>

<template>
  <div class="mid-container">
    <!-- 左侧容器 -->
    <div class="left-side">
      <div
        class="basic-panel"
        v-for="(item, index) in AssistModule.left"
        :key="item.id"
        :class="{ 'basic-panel-large': index === 0, 'basic-panel-small': index === 1 }"
      >
        <div class="basic-panel-title">
          {{ item.title }}
        </div>
        <div class="basic-panel-content">
          <component :is="item.components"></component>
        </div>
      </div>
    </div>

    <!-- 右侧容器 -->
    <div class="right-side">
      <!-- 可切换的大面板 -->
      <div class="basic-panel basic-panel-large">
        <!-- 当前选中的内容 -->
        <div class="basic-panel-content">
          <component :is="currentRightItem.children[0].components"></component>
        </div>
      </div>

      <!-- 固定的小面板 -->
      <div class="basic-panel basic-panel-small" v-for="item in AssistModule.right2" :key="item.id">
        <div class="basic-panel-title">
          {{ item.title }}
        </div>
        <div class="basic-panel-content">
          <component :is="item.components"></component>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 基础变量
$primary-bg: linear-gradient(270deg, rgba(9, 48, 111, 0.4) 0%, rgba(9, 48, 111, 0.8) 100%);
$shadow: 0px 0px 20px #09306f;
$border-radius: 6px;
$title-bg: url(@/assets/largescreen/title-pic.png) no-repeat center center;
$title-font: PangMenZhengDao;
$height: 100%;
$width: 100%;
// 基础面板样式
.basic-panel {
  background: $primary-bg;
  box-shadow: $shadow;
  border-radius: $border-radius;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: $height;

  &-title {
    width: $width;
    background: $title-bg;
    background-size: cover;
    padding-left: 5%;
    font-size: 20px;
    color: white;
    line-height: 38px;
    font-family: $title-font;
  }

  &-content {
    font-size: 14px;
    padding-top: 1.5rem;
    height: calc(100% - 1.5rem);
  }
}

// 布局容器
.mid-container {
  display: flex;
  justify-content: space-between;
  width: $width;
  height: $height;
  padding: 50px;
  gap: 20px;
}

// 左侧样式
.left-side {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;

  .basic-panel-large {
    height: 65%;
  }

  .basic-panel-small {
    height: 33%;
  }
}

// 右侧样式
.right-side {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;

  .basic-panel-large {
    height: 65%;

    &-item {
      height: 100%;
    }
  }

  .basic-panel-small {
    width: 455px;
    height: 33%;
  }
}
</style>
